<template>
  <div class="child1">
    <!-- 三个点击按钮 -->
    <div v-if="bflag">
      <el-button style="margin-left: 20%;" prefix-icon='el-icon-s-home' type="primary" plain class="margin"
        @click="dialogTableVisible = true; dialogTableVisible2 = false">按房间查询</el-button>
      <el-button type="primary" plain class="margin"
        @click="dialogTableVisible2 = true; dialogTableVisible = false">按业主查询</el-button>
      <el-button type="primary" plain class="margin" @click="toFlag">数据统计</el-button><br><br><br><br>
    </div>
    <!-- 按房间查询 盒子页面 -->
    <div style="width: 1200px; margin-left: 0%;" v-if="dialogTableVisible">
      <el-row :gutter="15" style="margin-left: 30%;">
        <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px">
          <el-col :span="13">
            <el-form-item label="小区" prop="form.xiaoqu">
              <el-input v-model="form.xiaoqu" placeholder="幸福小区" show-word-limit clearable prefix-icon='el-icon-s-home'
                :style="{ width: '100%' }" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="房间信息" prop="roomInfo">
              <el-cascader v-model="selectedRoomInfo" :options="roomOptions" :props="cascaderProps"
                :style="{ width: '100%' }" placeholder="请选择" clearable @change="handleChange"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item>
              <el-button type="primary" @click="fetchRoomData" style="width: 300px;">去收费</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <!-- 按业主查询 盒子页面 -->
    <div style="width: 1200px; margin-left: 0%;" v-if="dialogTableVisible2">
      <el-row :gutter="15" style="margin-left: 30%;">
        <el-form ref="form" :model="form" :rules="rules" size="medium" label-width="100px">
          <el-col :span="13">
            <el-form-item label="小区" prop="form.xiaoqu">
              <el-input v-model="form.xiaoqu" placeholder="幸福小区" show-word-limit clearable prefix-icon='el-icon-s-home'
                :style="{ width: '100%' }" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="业主姓名" prop="form.name">
              <el-input v-model="form.name" placeholder="请输入姓名" show-word-limit clearable prefix-icon='el-icon-s-custom'
                :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item label="业主手机号" prop="form.fangjian">
              <el-input v-model="form.fangjian" placeholder="请输入手机号" :maxlength="11" prefix-icon='el-icon-mobile'
                :style="{ width: '100%' }"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="13">
            <el-form-item>
              <el-button type="primary" @click="submitForm" style="width: 300px;">去收费</el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>

    <!-- 数据统计 盒子页面 -->
    <!-- 按业主查询 盒子页面 -->
    <div v-if="dflag" style="width: 100%; height: 500px;">
      <el-button type="" @click="toFlagOut">返回</el-button>
      <el-form ref="form" :model="form" label-width="100px">
        <span>年份选择</span><el-select v-model="form.region" placeholder="2020 年">
          <el-option label="2020 年" value="0"></el-option>
          <el-option label="2021 年" value="1"></el-option>
        </el-select>
        <el-button type="primary" @click="onSubmit" style="margin-left: 20px;">查询</el-button><br><br>
      </el-form>

      <el-table :data="tableData1" style="width: 100%">
        <el-table-column prop="date" label="收费项" width="180">
        </el-table-column>
        <el-table-column prop="name" label="物业管理费" width="180">
        </el-table-column>
        <el-table-column prop="address" label="垃圾清运费">
        </el-table-column>
        <el-table-column prop="name" label="物业管理费" width="180">
        </el-table-column>
        <el-table-column prop="address" label="垃圾清运费">
        </el-table-column>
      </el-table>

      <!-- 数据统计页面 -->
      <div style="width: 1500px; display: flex; flex-wrap: wrap;">
        <div class="ear-css">

          <el-form ref="form" :model="form" label-width="80px">
            <span>费用缴纳情况</span>
            <el-select v-model="form.fei" placeholder="物业管理费" style="margin-left: 200px;">
              <el-option label="物业管理费" value="0"></el-option>
              <el-option label="停车费" value="1"></el-option>
            </el-select>
            <el-button class="el-icon-s-order" @click="moneyAll"></el-button>
          </el-form>
          <!-- 弹出窗 -->
          <el-dialog title="费用汇总" :visible.sync="dialogmoneyAll">
            <el-table :data="tableData" border show-summary style="width: 100%">
              <el-table-column prop="year" label="年份" />
              <el-table-column prop="feeItem" label="费项" />
              <el-table-column prop="receivableAmount" label="应收金额(元)" />
              <el-table-column prop="receivedAmount" label="实收金额(元)" />
              <el-table-column prop="unreceivedAmount" label="未收金额(元)" />
            </el-table>
          </el-dialog>

          <div class="dingwei">
            <span>物业管理费</span><br><br>
            <el-form ref="form" :model="form" label-width="80px">
              <span>应收总额(元)</span>
              <span>{{ form.money }}</span>
              <span class="spanlet">实收(元)</span>
              <span style="color: greenyellow;">{{ form.money }}</span>
              <span class="spanlet">未收(元)</span>
              <span style="color: blue;">{{ form.money }}</span>
            </el-form>
          </div>
          <bing1 style=" margin-left: 120px;"></bing1>
        </div>

        <div class="ear-css">
          <span style="margin-left: 400px;">2020 年度收取总额(元)</span>
          <zhe style="margin-left: 360px;"></zhe>
        </div>

        <div class="ear-css">
          <span>欠费情况</span>
          <tiao></tiao>
        </div>

        <div class="ear-css" style="margin-left: 290px;margin-top: 60px">
          <span style="margin-left: 150px;">线上、线下缴纳比例</span>
          <bing></bing>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import bing from '@/views/payment/bing.vue'
import bing1 from '@/views/payment/bing1.vue'
import tiao from '@/views/payment/tiao.vue'
import zhe from '@/views/payment/zhe.vue'

import { fetchRoomData } from '@/api/payment/shouyintai'

export default {
  components: {
    bing,
    bing1,
    zhe,
    tiao
  },
  data() {
    return {
      bflag: true,
      dflag: false,
      // 收银台页面  去收费查询 跳转页面 按钮
      // 房间查询盒子值
      dialogTableVisible: false,
      // 业主查询盒子值
      dialogTableVisible2: false,
      form: {},
      tableData: [],
      tableData1: [
        { data: '单价', name: '11', address: '111' }
      ],
      // 弹出窗
      dialogmoneyAll: false,
      selectedRoomInfo: [],
      roomOptions: [],
      cascaderProps: {
        value: 'value',
        label: 'label',
        children: 'children',
      },
    };
  },
  methods: {

    // 获取房间数据
    fetchRoomData() {
      fetchRoomData().then(response => {
        this.roomOptions = response;
      }).catch(error => {
        console.error('Error fetching room data:', error);
        ElMessage.error('无法获取房间数据，请稍后再试！');
      });
    },
    handleChange(value) {
      console.log('Selected values:', value);
    },

    moneyAll() {
      this.dialogmoneyAll = true;
    },
    getSummaries(param) {
      const { columns, data } = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += '';
        } else {
          sums[index] = 'N/A';
        }
      });
      return sums;
    },
    // 返回按钮
    toFlagOut() {
      this.dflag = false;
      this.bflag = true;
      this.dialogTableVisible = true;
    },
    toFlag() {
      this.dialogTableVisible = false;
      this.dialogTableVisible2 = false;
      this.bflag = false;
      this.dflag = true;
    },
    // 查询
    findPage() {

    },
    // 收银台页面  去收费查询 跳转页面 按钮
    submitForm() {

    },
    // 作废账单记录按钮
    ZuoFei() {

    },
    // 预存
    Prexisted() {
      this.Dialog = true;
    },
    // 缴费情况 表操作 详情
    detail() {
      this.PaymentDiv = false;
      this.DetailDiv = true;
    },
    // 缴费情况标签页 返回按钮
    Out() {
      this.PaymentDiv = true;
      this.DetailDiv = false;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.findPage();
    }
  },
  // 在实例化之后
  created() {
    this.dialogTableVisible = true;
    this.fetchRoomData();
  }
};
</script>

<style>
.ear-css {
  display: inline-block;
  height: 400px;
  width: 600px;
  margin-top: 10px;
  margin-left: 10px;
}

.margin {
  width: 200px;
}

.jiaofei {
  width: 150px;
}

.dingwei {
  width: 300px;
  height: 100px;
  position: absolute;
  top: 35%;
  left: 10%;
  transform: translate(-50%, -50%);
}

.spanlet {
  margin-left: 40px;
}
</style>
